<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">
    <meta name="robots" content="index, follow">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/railscasts.min.css">
    <title>WinBox.js &ndash; Modern HTML5 Window Manager</title>
    <link rel="stylesheet" href="dist/css/winbox.min.css">
    <link rel="stylesheet" href="dist/css/themes/modern.min.css">
    <link rel="stylesheet" href="dist/css/themes/white.min.css">
    <script src="dist/js/winbox.min.js"></script>
    <!--<script src="dist/winbox.bundle.js"></script>-->
    <style>

        /* WinBox Theme: "custom" */

        .winbox.custom {
            background: linear-gradient(90deg, #ff00f0, #0050ff);
            box-shadow: none;
            border-radius: 12px 12px 0 0;
        }
        .winbox.custom.max,
        .winbox.custom.min {
            border-radius: 0;
        }
        .winbox.custom .wb-body {
            /* margin represents the width of window border: */
            margin: 4px;
            color: #fff;
            background: #131820;
        }
        .winbox.custom .wb-title {
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 600;
        }
        .winbox.custom .wb-icon * {
            opacity: 0.65;
        }
        .winbox.custom .wb-icon *:hover {
            opacity: 1;
        }
        .winbox.custom .wb-max {
            background-image: url(src/img/max.svg);
            background-size: 17px auto;
        }
        .winbox.custom .wb-min {
            background-image: url(src/img/min.svg);
        }
        .winbox.custom .wb-close {
            background-image: url(src/img/close.svg);
        }
        .winbox.custom .wb-full {
            display: none;
        }
        .winbox.custom .wb-body::-webkit-scrollbar {
            width: 12px;
        }
        .winbox.custom .wb-body::-webkit-scrollbar-track {
            background: transparent;
        }
        .winbox.custom .wb-body::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #263040;
        }
        .winbox.custom .wb-body::-webkit-scrollbar-thumb:window-inactive {
            background: #181f2a;
        }
        .winbox.custom .wb-body::-webkit-scrollbar-corner {
            background: transparent;
        }

        /* WinBox Theme: "my-theme" */

        .winbox.my-theme{
            background: #fff;
        }
        .winbox.my-theme .wb-body {
            color: #fff;
            background: #131820;
        }
        .winbox.my-theme .wb-title {
            color: #000;
        }
        .winbox.my-theme .wb-icon {
            filter: invert(1);
        }

    </style>
    <link rel="stylesheet" href="demo/style.css">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!">
    <meta name="keywords" content="window manager, web window, html5 popup, javascript window, web desktop, html5 windows, web frame, web box">
    <meta name="thumbnail" content="https://nextapps-de.github.io/winbox/demo/favicon.png">
    <meta property="og:url" content="https://nextapps-de.github.io/winbox/">
    <meta property="og:site_name" content="WinBox - HTML5 window manager">
    <meta property="og:image" content="https://nextapps-de.github.io/winbox/demo/og-image.png">
    <meta property="og:title" content="WinBox - HTML5 window manager">
    <meta property="og:description" content="WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!">
    <meta property="og:type" content="Software">
    <meta property="og:url" content="https://nextapps-de.github.io/winbox/">
    <link rel="icon" sizes="16x16 32x32 48x48 64x64" type="image/png" href="https://nextapps-de.github.io/winbox/demo/favicon.png">
    <link rel="icon" sizes="512x512 1024x1024" type="image/png" href="https://nextapps-de.github.io/winbox/demo/og-image.png">
</head>
<body>
    <div class="background"></div>
    <div class="scroll">
        <header>
            <a href="https://github.com/nextapps-de/winbox">Goto Github</a>
        </header>
        <div class="wrapper">
            <h1 style="margin-bottom: 0"><img src="demo/winbox.png" alt="WinBox.js: HTML5 Window Manager for the Web." width="2400" height="811"></h1>
            <h2>WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source!</h2>
            <br>
            <div class="button" onclick="window.examples['theme-modern']()" style="background-color: #ca00b4">Show Example</div>
            <br><br>

            <hr>
            <br>
            Load Library (Bundle)
            <br><br>
        <pre><code class="language-html">&lt;head>
    &lt;script src="dist/winbox.bundle.js">&lt;/script>
&lt;/head></code></pre>
            <div class="break"></div>
            <br>
            Load Library (Non-Bundle)
            <br><br>
            <pre><code class="language-html">&lt;head>
    &lt;link rel="stylesheet" href="dist/css/winbox.min.css">
    &lt;script src="dist/js/winbox.min.js">&lt;/script>
&lt;/head></code></pre>
            <div class="break"></div>

            <hr>
            <br>
            Class Constructor
            <br><br>
            <pre><code class="language-js">WinBox(title, options&lt;key: value>)</code></pre>
            <br>

            <hr>
            <br>
            <div style="color: #79c0ff; line-height: 22px;">You can open the browser dev tools and copy and paste the js-code blocks into the console and play with them.</div>

            <hr>
            <br>
            Basic Window
            <br><br>
            <pre><code class="language-js">new WinBox("Basic Window");</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['basic']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Custom Root
            <br><br>
            <pre><code class="language-js">new WinBox("Custom Root", {

    root: document.body
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['root']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Custom Border
            <br><br>
            <pre><code class="language-js">new WinBox("Custom Border", {

    border: "0.3em"
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['border']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Custom Color
            <br><br>
            <pre><code class="language-js">new WinBox({

    title: "Custom Color",
    background: "#ff005d",
    border: 4
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['color']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Limit Viewport
            <br><br>
            <pre><code class="language-js">new WinBox("Limit Viewport", {

    top: 50,
    right: 50,
    bottom: 0,
    left: 50
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['viewport']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Custom Position / Size
            <br><br>
            <pre><code class="language-js">new WinBox({

    title: "Custom Position / Size",
    x: "center",
    y: "center",
    width: "50%",
    height: "50%"
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['position']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Modal Window
            <br><br>
            <pre><code class="language-js">new WinBox("Modal Window", {

    modal: true
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['modal']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Set innerHTML
            <br><br>
            <pre><code class="language-js">new WinBox({

    title: "Set innerHTML",
    html: "&lt;h1>Lorem Ipsum&lt;/h1>"
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['innerhtml']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Mount DOM (Cloned)
            <br><br>

            <pre><code class="language-html">&lt;div id="backstore" style="display: none">
    &lt;div id="content">
        &lt;h1>Lorem Ipsum&lt;/h1>
        &lt;p>Lorem ipsum [...]&lt;/p>
        &lt;p>Duis autem vel [...]&lt;/p>
        &lt;p>Ut wisi enim [...]&lt;/p>
    &lt;/div>
&lt;/div></code></pre>
            <div class="break"></div>
            <pre><code class="language-js">new WinBox("Mount DOM", {

    mount: document.getElementById("content")
                   .cloneNode(true)
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['mount-clone']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Mount DOM (Singleton) + Auto-Unmount
            <br><br>
            <pre><code class="language-js">new WinBox("Mount DOM", {

    mount: document.getElementById("content")
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['mount-auto']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Open URI / URL
            <br><br>
            <pre><code class="language-js">new WinBox("WinBox.js", {

    url: "https://nextapps-de.github.io/winbox/"
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['iframe']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            All Options
            <br><br>
            <pre><code class="language-js">new WinBox({

    id: "my-window",
    class: ["no-full", "my-theme"],
    root: document.body,
    title: "All Options",
    background: "#fff",
    border: 4,
    width: 200,
    height: 200,
    x: "center",
    y: "center",
    max: false,
    top: 50,
    right: 50,
    bottom: 0,
    left: 50,
    html: "width: 200, height: 200",
    onfocus: function(){
        this.setBackground("#fff");
    },
    onblur: function(){
        this.setBackground("#999");
    },
    onresize: function(width, height){
        this.body.textContent = (
            "width: " + width + ", " +
            "height: " + height
        );
    },
    onmove: function(x, y){
        this.body.textContent = (
            "x: " + x + ", " +
            "y: " + y
        );
    },
    onclose: function(force){
        return !confirm("Close window?");
    }
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['all-options']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Control Programmatically
            <br><br>
            <pre><code class="language-html">&lt;div id="controls">
    &lt;button onclick="buttons.minimize()">Minimize (Toggle)&lt;/button>
    &lt;button onclick="buttons.maximize()">Maximize (Toggle)&lt;/button>
    &lt;button onclick="buttons.fullscreen()">Fullscreen (Toggle)&lt;/button>
    &lt;button onclick="buttons.move()">Move (Center, Center)&lt;/button>
    &lt;button onclick="buttons.resize()">Resize (50%, 50%)&lt;/button>
    &lt;button onclick="buttons.title()">Set Title&lt;/button>
    &lt;button onclick="buttons.color()">Set Color&lt;/button>
    &lt;button onclick="buttons.close()">Close&lt;/button>
&lt;/div></code></pre>
        <div class="break"></div>
        <pre><code class="language-js">var winbox = new WinBox("Controls", {

    mount: document.getElementById("controls"),
    border: 4,
    onclose: function(force){
        return !force && !confirm("Close window?");
    }
});</code></pre>
            <div class="break"></div>
            <pre><code class="language-js">window.buttons = {

    minimize: function(){

        winbox.minimize();
    },
    maximize: function(){

        winbox.maximize();
    },
    fullscreen: function(){

        winbox.fullscreen();
    },
    move: function(){

        winbox.move("center", "center");
    },
    resize: function(){

        winbox.resize("50%", "50%");
    },
    title: function(){

        winbox.setTitle("Title-" + Math.random());
    },
    color: function(){

        winbox.setBackground(
            "rgb(" + (Math.random() * 255 | 0) + "," +
                     (Math.random() * 255 | 0) + "," +
                     (Math.random() * 255 | 0) + ")"
        );
    },
    modal: function(){

        winbox.body.parentNode.classList.toggle("modal");
    },
    close: function(){

        winbox.close();
    },
    force_close: function(){

        winbox.close(true);
    }
};</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['controls']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Window Boilerplate
            <br><br>
            <img src="demo/boilerplate.svg" width="100%" alt="WinBox Boilerplate">

            <hr>
            <br>
            Custom Styles (Global)
            <br><br>
            <pre><code class="language-css">.winbox {
    background: linear-gradient(90deg, #ff00f0, #0050ff);
    border-radius: 12px 12px 0 0;
    box-shadow: none;
}

.winbox.min {
    border-radius: 0;
}

.wb-body {
    /* the width of window border: */
    margin: 4px;
    color: #fff;
    background: #131820;
}

.wb-title {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
}</code></pre>
            <div class="break"></div>

            Custom Icons
            <br><br>
            <pre><code class="language-css">.wb-icon * {
    opacity: 0.65;
}

.wb-icon *:hover {
    opacity: 1;
}

.wb-min {
    background-image: url(src/img/min.svg);
    background-size: 15px center;
}

.wb-max {
    background-image: url(src/img/max.svg);
}

.wb-close {
    background-image: url(src/img/close.svg);
}

.wb-full {
    display: none;
}</code></pre>
            <div class="break"></div>

            Custom Scrollbars
            <br><br>
            <pre><code class="language-css">.wb-body::-webkit-scrollbar {
    width: 12px;
}
.wb-body::-webkit-scrollbar-track {
    background: transparent;
}
.wb-body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #263040;
}
.wb-body::-webkit-scrollbar-thumb:window-inactive {
    background: #181f2a;
}
.wb-body::-webkit-scrollbar-corner {
    background: transparent;
}</code></pre>
            <div class="break"></div>
            <pre><code class="language-js">new WinBox("Custom CSS", {

    mount: document.getElementById("content")
                   .cloneNode(true)
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['custom-css']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Custom Styles By Classname
            <br><br>
            <pre><code class="language-css">.winbox.my-theme{
    background: #fff;
}
.winbox.my-theme .wb-body {
    color: #fff;
    background: #131820;
}
.winbox.my-theme .wb-title {
    color: #000;
}
.winbox.my-theme .wb-icon {
    filter: invert(1);
}</code></pre>
            <div class="break"></div>
            <pre><code class="language-js">new WinBox("Custom CSS (Class)", {

    class: "my-theme",
    mount: document.getElementById("content")
                   .cloneNode(true)
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['custom-class']()">Run Code</div>
            <br><br>

            <hr>
            <br>
            Use Theme
            <br><br>
            <pre><code class="language-html">&lt;head>
    &lt;link rel="stylesheet" href="dist/css/winbox.min.css">
    &lt;link rel="stylesheet" href="dist/css/themes/modern.min.css">
    &lt;script src="dist/js/winbox.min.js">&lt;/script>
&lt;/head></code></pre>
            <div class="break"></div>
            <pre><code class="language-js">new WinBox("Theme", {

    class: "modern",
    mount: document.getElementById("content")
                   .cloneNode(true)
});</code></pre>
            <div class="break"></div>
            <div class="button" onclick="window.examples['theme-modern']()">Run Code</div>
            <br><br>

        </div>
    </div>
    <div id="backstore" style="display: none">
        <div id="content">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </div>
        <div id="controls">
            <button onclick="window.buttons['minimize']()">Minimize (Toggle)</button>
            <button onclick="window.buttons['maximize']()">Maximize (Toggle)</button>
            <button onclick="window.buttons['fullscreen']()">Fullscreen (Toggle)</button>
            <button onclick="window.buttons['modal']()">Modal (Toggle)</button>
            <button onclick="window.buttons['center']()">Move (Center, Center)</button>
            <button onclick="window.buttons['move']()">Move (Right, Bottom)</button>
            <button onclick="window.buttons['resize']()">Resize (50%, 50%)</button>
            <button onclick="window.buttons['title']()">Set Title</button>
            <button onclick="window.buttons['color']()">Set Color</button>
            <button onclick="window.buttons['add']()">Add Class (my-theme)</button>
            <button onclick="window.buttons['remove']()">Remove Class (my-theme)</button>
            <button onclick="window.buttons['close']()">Close</button>
            <button onclick="window.buttons['force_close']()">Force Close</button>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
    <script>

        (function(){

            let winbox;

            window.examples = {

                "basic": function(){

                    new WinBox("Basic Window");
                },
                "root": function(){

                    new WinBox("Custom Root", {

                        root: document.body
                    });
                },
                "border": function(){

                    new WinBox("Custom Border", {

                        border: "0.3em"
                    });
                },
                "color": function(){

                    new WinBox({

                        title: "Custom Color",
                        background: "#ff005d",
                        border: 4
                    });
                },
                "viewport": function(){

                    new WinBox("Limit Viewport", {

                        top: 50,
                        right: 50,
                        bottom: 0,
                        left: 50
                    });
                },
                "position": function(){

                    new WinBox({

                        title: "Custom Position / Size",
                        x: "center",
                        y: "center",
                        width: "50%",
                        height: "50%"
                    });
                },
                "modal": function(){

                    new WinBox("Modal Window", {

                        modal: true
                    });
                },
                "innerhtml": function(){

                    new WinBox({

                        title: "Set innerHTML",
                        html: "<h1>Lorem Ipsum</h1>"
                    });
                },
                "mount-clone": function(){

                    new WinBox("Mount DOM", {

                        mount: document.getElementById("content")
                                       .cloneNode(true)
                    });
                },
                "mount-auto": function(){

                    new WinBox("Mount DOM", {

                        mount: document.getElementById("content")
                    });
                },
                "iframe": function(){

                    new WinBox("WinBox.js", {

                        url: "https://nextapps-de.github.io/winbox/",
                        class: "iframe"
                    });
                },
                "all-options": function(){

                    new WinBox({

                        id: "my-window",
                        class: ["no-full", "my-theme"],
                        root: document.body,
                        title: "All Options",
                        background: "#fff",
                        border: 4,
                        index: 50,
                        width: 200,
                        height: 200,
                        x: "center",
                        y: "center",
                        max: false,
                        top: 50,
                        right: 50,
                        bottom: 0,
                        left: 50,
                        html: "width: 200, height: 200",
                        onfocus: function(){
                            this.setBackground("#fff");
                        },
                        onblur: function(){
                            this.setBackground("#999");
                        },
                        onresize: function(width, height){
                            this.body.textContent = (
                                "width: " + width + ", " +
                                "height: " + height
                            );
                        },
                        onmove: function(x, y){
                            this.body.textContent = (
                                "x: " + x + ", " +
                                "y: " + y
                            );
                        },
                        onclose: function(force){
                            return !confirm("Close window?");
                        }
                    });
                },
                "custom-css": function(){

                    new WinBox("Custom CSS", {

                        class: "custom",
                        mount: document.getElementById("content")
                                       .cloneNode(true)
                    });
                },
                "custom-class": function(){

                    new WinBox("Custom CSS (Class)", {

                        class: "my-theme",
                        mount: document.getElementById("content")
                                       .cloneNode(true)
                    });
                },
                "theme-modern": function(){

                    new WinBox("Theme: Modern", {

                        class: "modern",
                        mount: document.getElementById("content")
                                       .cloneNode(true)
                    });
                },
                "controls": function(){

                    winbox = new WinBox("Controls", {

                        mount: document.getElementById("controls"),
                        border: 4,
                        onclose: function(force){
                            return !force && !confirm("Close window?");
                        }
                    });
                }
            };

            window.buttons = {

                minimize: function(){

                    winbox.minimize();
                },
                maximize: function(){

                    winbox.maximize();
                },
                fullscreen: function(){

                    winbox.fullscreen();
                },
                center: function(){

                    winbox.move("center", "center");
                },
                move: function(){

                    winbox.move("right", "bottom");
                },
                resize: function(){

                    winbox.resize("50%", "50%");
                },
                title: function(){

                    winbox.setTitle("Title-" + Math.random());
                },
                color: function(){

                    winbox.setBackground(
                        "rgb(" + (Math.random() * 255 | 0) + "," +
                                 (Math.random() * 255 | 0) + "," +
                                 (Math.random() * 255 | 0) + ")"
                    );
                },
                modal: function(){

                    winbox.body.parentNode.classList.toggle("modal");
                },
                add: function(){

                    winbox.addClass("my-theme");
                },
                remove: function(){

                    winbox.removeClass("my-theme");
                },
                close: function(){

                    winbox.close();
                },
                force_close: function () {

                    winbox.close(true);
                }
            };

        }());

        hljs.highlightAll();

    </script>
</body>
</html>